<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>入门</title>
    <!-- 这里可以添加CSS样式文件 -->
  </head>
  <body>
     <script type="importmap">
      {
        "imports": {
          "three": "https://threelab.cn/threejs/build/three.module.js",
          "three/addons/": "https://threelab.cn/threejs/examples/jsm/",
          "gsap": "./js/gsap/index.js"
        }
      }
    </script>
    <script type="module">
      import * as THREE from "three"; 
      import { OrbitControls } from "three/addons/controls/OrbitControls.js";
      import { FBXLoader } from "three/addons/loaders/FBXLoader.js";
      import gsap from "gsap";

      

      const scene = new THREE.Scene();

      const camera = new THREE.PerspectiveCamera(
        75,
        window.innerWidth / window.innerHeight,
        0.1,
        1000
      );

      camera.position.set(10, 10, 10);

      const renderer = new THREE.WebGLRenderer();

      renderer.setSize(window.innerWidth, window.innerHeight);

      document.body.appendChild(renderer.domElement);

      new OrbitControls(camera, renderer.domElement);

      animate();

      function animate() {
        renderer.render(scene, camera);

        requestAnimationFrame(animate);
      }

      window.onresize = () => {
        renderer.setSize(window.innerWidth, window.innerHeight);

        camera.aspect = window.innerWidth / window.innerHeight;

        camera.updateProjectionMatrix();
      };

      scene.add(
        new THREE.AxesHelper(100000),
        new THREE.AmbientLight(0xffffff, 6)
      );

      // 加载模型
      new FBXLoader().load(
        "/files/model/city.FBX",
        (object3d) => {
          scene.add(object3d);

          object3d.scale.set(0.0005, 0.0005, 0.0005);

          setTransformAnimate(object3d);
        }
      );

      // 变换动画
      function setTransformAnimate(mesh) {
        const position = mesh.position.clone();

        position.y += 5; // 位置向上移动100

        const rotation = mesh.rotation.clone();

        rotation.y += Math.PI / 4; // 旋转45度

        const scale = mesh.scale.clone();

        scale.z *= 2; // 缩放z轴2倍

        scale.x *= 2; // 缩放x轴2倍

        // 组合参数
        const transformInfo_ = { position, rotation, scale };

        // 执行
        const promises_gsap = ["position", "rotation", "scale"].map((i) => {
          return new Promise((resolve) => {
            gsap.to(mesh[i], {
              x: transformInfo_[i].x,

              y: transformInfo_[i].y,

              z: transformInfo_[i].z,

              //间隔时间
              duration: 3,

              //动画参数名
              ease: "none",

              //重复次数
              repeat: 0,

              //往返移动
              yoyo: false,

              yoyoEase: true,

              onComplete: resolve,
            });
          });
        });

        Promise.all(promises_gsap).then(() => console.log("动画完成"));
      }
    </script>
  </body>
</html>
